<template>
  <blogHeader></blogHeader>

  <!-- 主内容区域 -->
  <main class="container main_min_height max-w-[1200px] mx-auto p-4">
    <div class="grid grid-cols-10 gap-8">

      <!-- 左边栏 -->
      <div class="sm:col-span-7 col-span-10 mb-3 bg-white rounded-lg">
        <!-- HEADER -->
        <h2 class="blog-font-cute text-2xl font-bold mt-6 pl-4 text-gray-800 dark:text-white">标签</h2>
        <ul class="ml-1 pb-4 pt-2">
          <li v-for="(item, index) in tags" :key="item.id" @click="goTagArticleListPage(item.id, item.name)"
            class=" transition duration-300  hover:bg-gray-100 cursor-pointer flex items-center py-1 mx-6 my-2 rounded-lg border-b">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="size-4 mr-2">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0 1 20.25 6v12A2.25 2.25 0 0 1 18 20.25H6A2.25 2.25 0 0 1 3.75 18V6A2.25 2.25 0 0 1 6 3.75h1.5m9 0h-9" />
            </svg>

            <span class="blog-font-cute">{{ item.name }}</span>
          </li>
        </ul>
      </div>


      <!-- 右边侧边栏 -->
      <aside class="col-span-3 hidden sm:block">
        <!-- 博主信息 -->
        <AuthorInfoCard></AuthorInfoCard>


      </aside>
    </div>
    
  </main>
  <div class="hidden md:block sticky bottom-0 right-0 w-full">
        <div class="absolute right-0 bottom-0">
            <live2d></live2d>
        </div>
    </div>
  <indexFooter></indexFooter>


</template>

<script setup>
import { onMounted, ref } from 'vue'
import blogHeader from '@/composition/frontend/component/Header.vue'
import AuthorInfoCard from '@/composition/frontend/component/AuthorInfoCard.vue';
import indexFooter from '@/composition/frontend/component/indexFooter.vue';
import live2d from '@/components/live2d.vue';
import { getTags } from '@/api/frontend/tag';
import { useRouter } from 'vue-router';

// 根据标签跳转标签文章页并显示
const router = useRouter()
const goTagArticleListPage = (id, name) => {
  router.push({
    path: '/tag/article/list',
    query: {
      id,
      name
    }
  })
}



//分类列表
const tags = ref([])


onMounted(() => {
  getTags().then((res) => {
    if (!res.success) {
      showMessage(res.message, 'error')
      return
    }
    tags.value = res.data
  })
})


</script>

<style scoped></style>